<!-- 注册界面 -->
<template>
    <div id="bg">
      <div id="logo" >游戏服务管理系统</div>
      <div id="login">
        <el-card class="box-card" :model="registerData">
          <div id="form">
            <el-input prefix-icon="el-icon-user" v-model="registerData.name" placeholder="请输入账户"> </el-input>
            <el-input
              placeholder="请输入密码"
              v-model="registerData.password"
              show-password
              prefix-icon="el-icon-lock"

            ></el-input>
            <el-input prefix-icon="el-icon-lock" v-model="registerData.repassword" type="password" placeholder="请输入再次密码" show-password></el-input>

            <template>
              <el-radio v-model="registerData.role" label="2" style="font-size: 20px; font-weight: bold;">我是用户</el-radio>
              <el-radio v-model="registerData.role" label="3"  style="font-size: 20px; font-weight: bold;">我是商家</el-radio>
            </template>

            <el-button type="primary" id="return"><router-link to="/" style="text-decoration:none; color:white;">返回</router-link></el-button>
            <el-button id="register" type="success" @click="register()">注册</el-button>
          </div>
        </el-card>
      </div>
      <div id="clock" >
        <div id="time">{{ time }}</div>
        <div id="date">{{ date }}</div>
      </div>
      <div id="copy">Copyright @ 2024.涂科网页版权归属 </div>
    </div>
  </template>
  
  <!-- //css -->
  <style scoped>
  #bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* 渐变 */
    background-image: url("/src/views/photo/login.jpg");
    background-size: 100%;
    animation: myanimation 30s infinite;
  }
  @keyframes myanimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 100%;
    }
  }
  
  #logo {
    color: aliceblue;
    font-size: 50px;
    font-weight: 80;
    text-transform: uppercase;
    position: absolute;
    left: 5%;
    top: 15%;
  }
  #login {
    top: 30%;
    position: absolute;
    left: 38%;
  }
  .el-card {
    border-radius: 3%;
    width: 373px;
    height: 310px;
    background-color: rgba(255, 255, 255, 0.35);
    border: 0px;
  }
  #form {
    padding-bottom: 15px;
    line-height: 60px;
  }
  #clock{
      color: aliceblue;
      position:absolute;
      top: 70%;
      right: 10%;
      text-align: right;
  }
  #register{
    position: absolute;
    left: 72%;
    top: 85%;

  }
  #return{
    position: absolute;
    left: 6%;
    top: 85%;

  }
  #time{
      font-size: 50px;
  }
  #date{font-size: 35px;}
  #copy{
      color:aliceblue;
      position:absolute;
      bottom: 5%;
      left: 40%;
      right: 0;
      
  }
  </style>
  
  
  <script>
import request from '@/request/request.js';


  export default {
    data() {
      return {
        registerData: {
          role: "2",
        },
      };
    },
    mounted() {
      this.$nextTick(() => {
        setInterval(this.update_clock, 1000);
      });
    },
    methods: {
      register() {
        if (this.registerData.password !== this.registerData.repassword) {
          this.$message.error("两次密码输入不一致");
          return ;
        }
        request.post("/user/register", this.registerData).then(res => {
          if (res.code === "0") {
            this.$message.success("注册成功，请登录");
            this.registerData = {};
            this.$router.push({path:"/"});
          } else {
            this.$message.error(res.data.msg);
          }
        });
      },
        login(){
            this.$router.push({path:'/game'})
        },
      update_clock:function () {
          var d =new Date();
        var year = d.getFullYear();
        if (year < 10) {
          year = "0"+year;
        }
        var mon = d.getMonth()+1;
        if (mon < 10) {
          mon = "0" + mon;
        }
        var day = d.getDate();
        if (day<10) {
          day = "0" + day;
        }
        var hour = d.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        var minute = d.getMinutes();
        this.time = hour + ":" + minute;
        this.date = year + "/" + mon + "/" + day;
      },
    }
  };
  </script>





